<template>

    <div class="video">
        <el-row  type="flex" justify="center" class="video-title">
            <el-col :span="24">
                <el-image :src="src2" class="title-image"></el-image>
            </el-col>
        </el-row>




<!--        <el-row  type="flex" justify="center" class="video-title">-->
<!--            <el-col :span="24">-->
<!--                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">-->
<!--                    <el-menu-item v-for="(category,index) in categoryList" :key="index+''" :index="index+''" @click="queryVideoByCategory(category.id)">{{category.name}}</el-menu-item>-->
<!--                    <el-button type="primary" style="margin-top: 11px" @click="empty">全部</el-button>-->
<!--                </el-menu>-->
<!--            </el-col>-->
<!--        </el-row>-->

        <el-row  type="flex" justify="center" class="video-center" >
            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12" :class="fixed == true ? 'fixedBtn' :''">
                <el-col>
                    <el-card shadow="hover" style="width: auto;font-size: large;text-align: center;color: #ff6d6d">【分类】</el-card>
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-card shadow="hover">
                            <el-menu-item style="font-size: large;width: auto;text-align: center;" v-for="(category,index) in categoryList" :key="index" :index="index+''" @click="queryVideoByCategory(category.id)">{{category.name}}</el-menu-item>
                        </el-card>
                    </el-menu>
                </el-col>
            </div>
            <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12">
                <el-col  v-for="item in videolist" :key="item.id">
                    <div class="video-text">
                        <span>{{item.title}}</span>
                        <el-tag class="tag-vedio" effect="dark">{{item.category.name}}</el-tag>
                    </div>
                    <div class="video-block">
                        <video-player  class="video-player vjs-custom-skin"
                                       ref="videoPlayer"
                                       :playsinline="true"
                                       :options="item.playerOptions">
                        </video-player>
                    </div>
                </el-col>
            </div>
        </el-row>

        <el-row type="flex" class="row-bg" justify="center">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </el-row>
    </div>

</template>

<script>
    import 'video.js/dist/video-js.css'
    import 'vue-video-player/src/custom-theme.css'
    import { queryVideoList,categoryList } from '../api'
    export default {
        name: "picture-detail",
        data(){
          return{
              current: 1,
              size: 25,
              total:0,
              src1: require('../assets/wallhaven-lq5k3r.jpg'),
              src2: require('../assets/qingming.jpg'),
              activeIndex: '1',
              videolist:[],
              categoryList: [],
              playerOptions : [],
              fixed: false,
          }
        },
        methods:{
            queryVideoList(id,current,size){
                queryVideoList(id,current,size).then(res=>{
                    console.log("total=="+res.data.total)
                    this.videolist = res.data.records || []
                    this.total = res.data.total
                    for (var i = 0; i < this.videolist.length; i++) {
                        let arrs = {
                            playbackRates: [1.0, 2.0, 3.0], //播放速度
                            autoplay: false, //如果true,浏览器准备好时开始回放。
                            muted: false, // 默认情况下将会消除任何音频。
                            loop: false, // 导致视频一结束就重新开始。
                            preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                            language: "zh-CN",
                            aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                            sources: [
                                {
                                    type : "",
                                    src: this.videolist[i].video //url地址
                                }
                            ],
                            poster: this.videolist[i].cover, //封面地址
                            notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                            controlBar: {
                                timeDivider: true,
                                durationDisplay: true,
                                remainingTimeDisplay: false,
                                fullscreenToggle: true //全屏按钮
                            }
                        }
                        this.videolist[i].playerOptions= arrs
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            handleSelect(key, keyPath) {
                // console.log(key, keyPath);
            },
            CategoryList(){
                categoryList().then(res=>{
                    this.categoryList = res.data
                    // console.log(this.categoryList)
                }).catch(err=>{
                    console.log(err)
                })
            },
            queryVideoByCategory(id){
                this.queryVideoList(id,this.current,this.size)
            },
            empty(){
                this.queryVideoList(null,this.current,this.size)
            },
            fixedActiveBtn() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                scrollTop >=1212 ? this.fixed = true : this.fixed = false
            },
            handleCurrentChange(val) {
                this.$nextTick(() => {
                    this.current = val;
                    this.queryVideoList(null,this.current, this.size)
                    console.log(this.current)
                })
            }

        },
        mounted() {
            this.queryVideoList('',this.current,this.size)
            this.CategoryList()
            window.addEventListener('scroll', this.fixedActiveBtn);
            console.log(this.total)
        }
    }
</script>


<style  lang="less">
    .fixedBtn {
        position: fixed;   //固定定位
    top: -80px;
        left: 0;
        z-index: 200;
    }
    .video{
        margin-top: 80px;
    }
    .video-center{
    margin-top: 20px;
    }
    .video-title{
        font-weight: bold;

    }
    .title-image{
        width: 100%;

    }
    .tag-vedio{
        float: right;
        margin-bottom: 10px;
    }
    .video-js .vjs-icon-placeholder {
        width: 20px;
        height: 20px;
        display: block;
    }
    .video-block{
        height: 100%;
        padding: 10px;
    }
    .video-text{
        padding: 10px;
    }
</style>
